<template>
    <div class="page-wrap page-wrap-ql">
        <div class="page-cont">
            <a-page-header @back="handleBack">
                <template #title> {{ systemName }}-需求明细</template>
            </a-page-header>
            <div style="padding: 24px">
                <a-radio-group class="margin-b-8" v-model:value="status" button-style="solid" @change="handleChange">
                    <a-radio-button value="">全部</a-radio-button>
                    <a-radio-button value="3">已上线</a-radio-button>
                    <a-radio-button value="2">处理中</a-radio-button>
                    <a-radio-button value="6">挂起</a-radio-button>
                </a-radio-group>
                <a-table rowKey="id" size="small" :loading="loading" :columns="tableColumns" :data-source="list" :pagination="false">
                    <template #requireType="{ record }">
                        {{ $filters.valToNameFilter('requireType', record.requireType) }}
                    </template>
                    <template #requireName="{ text }">
                        <div v-html="text" v-if="disabled" class="desc-content" />
                    </template>
                    <template #expectTime="{ text }">
                        {{ $filters.dateFilter(text) }}
                    </template>
                    <template #components="{ record }">
                        <span v-if="record.pmpJiraIssueDTO && record.pmpJiraIssueDTO.components">
                            {{ JSON.parse(record.pmpJiraIssueDTO.components)[0].name }}
                        </span>
                    </template>
                </a-table>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import { message } from 'ant-design-vue';
import { useRouterApi } from '@/hooks/common/useRouterApi';
import api from '@/api';
import { defineComponent, ref, unref, reactive, toRefs } from 'vue';
export default defineComponent({
    setup() {
        const { handleBack, route } = useRouterApi({
            backQuery: {
                path: '/energyManage/analysisReport'
            }
        });
        const tableColumns = [
            {
                title: '产品需求',
                width: 500,
                dataIndex: 'requireName'
            },
            {
                title: '版本号',
                dataIndex: 'relateVersionNumber'
            },
            {
                title: '模块',
                dataIndex: 'components',
                slots: { customRender: 'components' }
            },
            {
                title: '预计完成时间',
                dataIndex: 'expectTime',
                slots: { customRender: 'expectTime' }
            }
        ];

        const state = reactive<any>({
            loading: false,
            list: [],
            systemName: '',
            versionNumber: '',
            status: ''
        });
        const handleChange = (val) => {
            getList(val.target.value);
        };
        const getList = async (status = '3') => {
            const query = {
                ids: route.query.ids,
                status
            };
            const { success, moule, errorMsg } = await api.productRequireModel.findProductsByIds(query);
            if (success) {
                state.list = [...moule];
                if (moule.length) {
                    state.versionNumber = moule[0].relateVersionNumber;
                }
            } else {
                message.error(errorMsg);
            }
        };
        state.systemName = route.query.systemName;
        state.status = route.query.status || '';
        getList(state.status);
        return {
            tableColumns,
            ...toRefs(state),
            handleBack,
            handleChange
        };
    }
});
</script>

<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    .page-cont {
        background: #fff;
        .btn-group {
            margin: 24px 0;
            button + button {
                margin-left: 8px;
            }
        }
    }
}
.desc-content {
    img {
        max-width: 400px;
        max-height: 400px;
    }
}
</style>